<template>
  <div class="container">
    <Breadcrumb>
      <BreadcrumbItem>权限管理</BreadcrumbItem>
    </Breadcrumb>
    <Divider />
    <!-- 模糊查询 -->
    <Form ref="formInfo" label-position="left" :label-width="70" :model="formInfo" inline>
      <FormItem label="权限名称" prop="perName">
        <i-input v-model="formInfo.perName" placeholder="请输入" style="width:220px"></i-input>
      </FormItem>
      <Button type="primary" @click="selectPur()" class="cha">查询</Button>
    </Form>
    <!-- 添加、删除 -->
    <div class="butt">
      <Button type="primary" icon="md-add" @click="propertyAdd">添加</Button>
      <Button type="error" icon="md-close" class="delete">删除</Button>
    </div>
    <Table border :columns="columns7" :data="data6" class="table"></Table>
    
    <Page :total="pageTotal" 
    :current="pageNum" 
    :page-size="pageSize" 
    show-elevator 
    show-sizer 
    show-total 
    placement="top"  
    @on-change="handlePage" 
    @on-page-size-change='handlePageSize'
    class="fenye1">
    </Page>

    <!--修改权限信息弹窗-->
    <Modal v-model="formTable.modal" title="权限信息修改" @on-cancel="modalCancel" >
      <Form
        ref="formTable"
        label-position="right"
        :rules="formTableRules"
        :label-width="90"
        :model="formTable"
      >
        <Form-item label="权限名称" prop="perName">
          <i-input v-model="formTable.perName" placeholder="请输入权限名"></i-input>
        </Form-item>
        <Form-item label="权限菜单" prop="menuName">
          <i-input v-model="formTable.menuName" placeholder="请输入权限菜单"></i-input>
        </Form-item>
        <Form-item label="权限类型" prop="menuType">
          <i-input v-model="formTable.menuType" placeholder="请输入权限类型"></i-input>
        </Form-item>
        <Form-item label="权限路径" prop="menuUrl">
          <i-input v-model="formTable.menuUrl" placeholder="请输入权限路径"></i-input>
        </Form-item>
        <Form-item label="菜单code" prop="menuCode">
          <i-input v-model="formTable.menuCode" placeholder="请输入..."></i-input>
        </Form-item>
        <Form-item label="权限信息" prop="parentCode">
          <i-input v-model="formTable.parentCode" placeholder="请输入..."></i-input>
        </Form-item>
        <Form-item label="权限描述" prop="perDesc">
          <i-input v-model="formTable.perDesc" placeholder="请输入..."></i-input>
        </Form-item>
      </Form>
      <div slot="footer">
        <Button @click="modalCancel">取消</Button>
        <Button type="primary" icon="checkmark" :loading="formTable.loading" @click="editSubmit">修改</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  data () {
    const validatePassCheck = (rule, value, callback) => {}
    return {
      pageTotal: 0, //数据总数
      pageNum: 1, //初始页
      pageSize: 10, //每页条数
      formInfo: {
        perName: ''
      },
      formTable: {
        modal: false,
        loading: false,
        permissionId: '',
        perName: '',
        menuName: '',
        menuType: '',
        menuUrl: '',
        menuCode: '',
        parentCode: '',
        perDesc: ''
      },

      columns7: [
        {
          type: 'selection',
          width: 80,
          align: 'center'
        },
        {
          title: '权限id',
          key: 'permissionId',
          align: 'center',
          width: 120,
        },
        {
          title: '权限名',
          key: 'perName',
          width: 150,
          align: 'center'
        },
        {
          title: '权限菜单',
          key: 'menuName',
          width: 120,
          align: 'center'
        },
        {
          title: '权限信息',
          key: 'menuType',
          align: 'center',
          align: 'center'
        },
        {
          title: '权限路径',
          key: 'menuUrl',
          align: 'center'
        },
        {
          title: '菜单code',
          key: 'menuCode',
          align: 'center'
        },
         {
          title: '权限信息',
          key: 'parentCode',
          align: 'center'
        },
         {
          title: '权限描述',
          key: 'perDesc',
          align: 'center'
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          width: 150,
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '10px'
                  },
                  on: {
                    click: () => {
                      this.purviewEdit(params.row)
                    }
                  }
                },
                '修改'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                     this.remove(params.index, params.row);
                    }
                  }
                },
                '删除'
              )
            ])
          }
        }
      ],
      data6: [
        {
        permissionId: '',
        perName: '',
        menuName: '',
        menuType: '',
        menuUrl: '',
        menuCode: '',
        parentCode: '',
        perDesc: ''
        }
      ]
    }
  },
  methods: {
    //分页
    handlePage(value) {
      console.log(value);
      this.pageNum = value;
      this.getPurview();
    },

    handlePageSize(value) {
      console.log(value);
      this.pageSize = value;
      this.getPurview();
    },
    getPurview(){
      this.$axios.get("permission",{
          params:{
            pageNum:this.pageNum,
            pageSize:this.pageSize
          }
        }).then(response =>{
          console.log(response.data);
          this.pageTotal=response.data.tatol
          this.data6 = response.data.data;
        })
        .catch();
    },
//查询
    selectPur () {
        this.$axios.get('Permission', {
        params: {
          name: this.formInfo.perName
        }
        }).then(response => {
          console.log(response.data)
          this.data6 = response.data.data;
        }).catch()
    
      this.$refs[perName].validate(valid => {
      })
    },
//用户添加
    propertyAdd() {
      this.$router.push('purviewAdd')
    },

  //删除
    remove(index, row) {
      this.$Modal.confirm({
        title: "温馨提示",
        width: 300,
        content: "<p>你确定要删除?删除后不可恢复!</p>",
        loading: false,
        onOk: () => {
          this.data6.splice(index, row.permissionId);
          this.$axios.delete("permissionId", {
            params: { permissionId: row.permissionId }
          });
        }
      });
    },
// 修改
    editSubmit: function(data) {
      this.formTable.loading = true;
      this.$axios
        .put("permission", {
          permissionId: this.formTable.permissionId,
          perName: this.formTable.perName,
          menuName: this.formTable.menuName,
          menuType: this.formTable.menuType,
          menuUrl: this.formTable.menuUrl,
          menuCode: this.formTable.menuCode,
          parentCode: this.formTable.parentCode,
          perDesc: this.formTable.perDesc,
        })
        .then(response => {
          this.formTable.loading = false;
         
          if (response.data.code == 0) {
            this.$Notice.success({
              title: "信息修改成功"
            });
          } else {
            this.$Notice.error({
              title: "信息修改失败"
            });
          }
           this.modalCancel();
        })
        .catch(console.log(response.data));
    },
//获取每一行值
    purviewEdit (row) {
      console.log(row)
        this.formTable.modal = true

        this.formTable.permissionId = row.permissionId,
        this.formTable.perName = row.perName,
        this.formTable.menuName =row.menuName,
        this.formTable.menuType = row.menuType,
        this.formTable.menuUrl = row.menuUrl,
        this.formTable.menuCode = row.menuCode,
        this.formTable.parentCode = row.parentCode,
        this.formTable.perDesc = row.perDesc  
      },
    modalCancel () {
      this.formTable.modal = false
      this.$refs['formTable'].resetFields()
    }
  },
   created: function() {
     this.getPurview()
  //  this.$axios.get("permission")
  //     .then(response => {
  //       console.log(response.data);
  //       this.data6 = response.data.data;
  //     })
  //     .catch();
  }
}
</script>

<style>
.fenye {
  position: relative;
  margin-top: 50px;
  margin-left: 29%;
}
.table {
  position: relative;
  margin-top: 20px;
}
.delete{
  position: relative;
  left: 30px;
}

.cha{
  position: relative;
  top: 1px;
  left: 1px;
}
</style>